﻿<!DOCTYPE html>
<html>
<head>
    <title>枪战小游戏</title>
    <style>
        #game-container {
            width: 800px;
            height: 500px;
            background-color: #ddd;
            position: relative;
        }

        #player {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            left: 0;
            top: 225px;
        }

        .bullet {
            width: 10px;
            height: 5px;
            background-color: red;
            position: absolute;
        }

        .enemy {
            width: 30px;
            height: 30px;
            background-color: green;
            position: absolute;
        }
    </style>
</head>
<body>
    <h1>枪战小游戏</h1>
    <div id="game-container">
        <div id="player"></div>
    </div>

    <script>
        // 获取游戏容器和玩家元素
        var gameContainer = document.getElementById('game-container');
        var player = document.getElementById('player');

        // 初始化玩家位置和子弹数组
        var playerX = 0;
        var playerY = 225;
        var bullets = [];

        // 监听键盘按下事件
        document.addEventListener('keydown', function(event) {
            // 如果按下空格键，则发射子弹
            if (event.keyCode === 32) {
                var bullet = document.createElement('div');
                bullet.className = 'bullet';
                bullet.style.left = playerX + 'px';
                bullet.style.top = playerY + 'px';
                gameContainer.appendChild(bullet);
                bullets.push(bullet);
            }
        });

        // 监听键盘释放事件
        document.addEventListener('keyup', function(event) {
            // 如果释放空格键，则停止发射子弹
            if (event.keyCode === 32) {
                bullets.forEach(function(bullet) {
                    gameContainer.removeChild(bullet);
                });
                bullets = [];
            }
        });

        // 监听鼠标移动事件
        gameContainer.addEventListener('mousemove', function(event) {
            playerX = event.clientX - gameContainer.offsetLeft - player.offsetWidth / 2;
            playerY = event.clientY - gameContainer.offsetTop - player.offsetHeight / 2;
            player.style.left = playerX + 'px';
            player.style.top = playerY + 'px';
        });

        // 创建敌人
        function createEnemy() {
            var enemy = document.createElement('div');
            enemy.className = 'enemy';
            enemy.style.left = (gameContainer.offsetWidth - enemy.offsetWidth) + 'px';
            enemy.style.top = Math.floor(Math.random() * (gameContainer.offsetHeight - enemy.offsetHeight)) + 'px';
            gameContainer.appendChild(enemy);

            // 移动敌人
            var enemyInterval = setInterval(function() {
                enemy.style.left = (parseInt(enemy.style.left) - 5) + 'px';

                // 检查是否与子弹碰撞
                bullets.forEach(function(bullet) {
                    if (checkCollision(bullet, enemy)) {
                        gameContainer.removeChild(bullet);
                        gameContainer.removeChild(enemy);
                        clearInterval(enemyInterval);
                    }
                });

                // 检查是否与玩家碰撞
                if (checkCollision(player, enemy)) {
                    gameContainer.removeChild(enemy);
                    clearInterval(enemyInterval);
                    alert('游戏结束！');
                }

                // 检查是否超出游戏容器
                if (parseInt(enemy.style.left) < -enemy.offsetWidth) {
                    gameContainer.removeChild(enemy);
                    clearInterval(enemyInterval);
                }
            }, 10);
        }

        // 检查元素碰撞
        function checkCollision(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();

            return !(rect1.right < rect2.left || 
                    rect1.left > rect2.right || 
                    rect1.bottom < rect2.top || 
                    rect1.top > rect2.bottom);
        }

        // 每隔1秒创建一个敌人
        setInterval(createEnemy, 1000);
    </script>
</body>
</html>
